<template>
  <div class="base-table">
    <!-- 工具栏 -->
    <div class="table-toolbar" v-if="$slots.toolbar">
      <slot name="toolbar"></slot>
    </div>

    <!-- 表格 -->
    <el-table
      ref="tableRef"
      v-bind="$attrs"
      :data="data"
      :border="border"
      :stripe="stripe"
      v-loading="loading"
      class="table-content"
    >
      <!-- 选择列 -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
        align="center"
        fixed="left"
      />

      <!-- 索引列 -->
      <el-table-column
        v-if="index"
        type="index"
        label="序号"
        width="60"
        align="center"
      />

      <!-- 数据列 -->
      <template v-for="(column, idx) in columns" :key="idx">
        <el-table-column
          v-bind="column"
          :align="column.align || 'left'"
          :show-overflow-tooltip="column.showOverflowTooltip ?? true"
        >
          <template #default="scope" v-if="column.slot || column.formatter">
            <slot
              v-if="column.slot"
              :name="column.slot"
              v-bind="scope"
            ></slot>
            <span v-else-if="column.formatter">
              {{ column.formatter(scope.row, column, scope.$index) }}
            </span>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 分页 -->
    <div class="table-pagination" v-if="showPagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        :layout="paginationLayout"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
    required: true
  },
  border: {
    type: Boolean,
    default: true
  },
  stripe: {
    type: Boolean,
    default: true
  },
  loading: {
    type: Boolean,
    default: false
  },
  selection: {
    type: Boolean,
    default: false
  },
  index: {
    type: Boolean,
    default: false
  },
  showPagination: {
    type: Boolean,
    default: true
  },
  total: {
    type: Number,
    default: 0
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  },
  paginationLayout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  }
})

const emit = defineEmits(['update:current-page', 'update:page-size', 'size-change', 'current-change'])

const tableRef = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)

// 处理页码改变
const handleCurrentChange = (val) => {
  emit('update:current-page', val)
  emit('current-change', val)
}

// 处理每页条数改变
const handleSizeChange = (val) => {
  emit('update:page-size', val)
  emit('size-change', val)
}

// 暴露方法
defineExpose({
  tableRef,
  getSelectionRows: () => tableRef.value?.getSelectionRows(),
  toggleRowSelection: (row, selected) => 
    tableRef.value?.toggleRowSelection(row, selected),
  clearSelection: () => tableRef.value?.clearSelection()
})
</script>

<style scoped>
.base-table {
  width: 100%;
}

.table-toolbar {
  margin-bottom: 16px;
}

.table-content {
  margin-bottom: 16px;
}

.table-pagination {
  display: flex;
  justify-content: flex-end;
}

@media screen and (max-width: 768px) {
  .table-content {
    width: 100%;
    overflow-x: auto;
  }

  .table-pagination {
    justify-content: center;
  }

  :deep(.el-pagination) {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style> 